<!-- 微信群广告 -->
<template>
  <sidebar-block v-show="isShow" style="display:block" class="wechatBox">
    <div class="wechat-banner">
      <img class="wechat-img" src="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/default.640d9a7.png" alt="">
      <div class="close-btn" @click="close" title="关闭">×</div>
    </div>
  </sidebar-block>
</template>

<script>
import SidebarBlock from './SidebarBlock.vue';

export default {
  name:'WechatBanner',
  data () {
    return {
      isShow:true
    }
  },
  methods:{
    close(){
      this.isShow=false;
    }
  },
  components:{
    SidebarBlock
  }
}
</script>

<style  scoped>
.wechat-banner {
    position: relative;
    font-size: 0;
    cursor: pointer;
}

.wechat-img{
  width: 100%;
  image-rendering: -webkit-optimize-contrast;
  vertical-align: middle;
  /* aspect-ratio: 1507/533; */
}

.close-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 3.6px 6px;
    /* font-size: 12px; */
    font-size: 20px;
    color: #333;
    opacity: .5;
    cursor: pointer;
    z-index: 1;
    display: none;
}

.wechat-banner:hover .close-btn{
  display: block;
}
</style>
